import FilterForm from "./components/filterForm";
import PageTable from "./components/pageTable";
import { useState } from "react";
// import { PageContainer } from '@ant-design/pro-components';
import PageContainer from "@/components/PageContainer";
import { Button, Modal, Form, Input, Radio, Space } from "antd";
import { connect } from "umi";
import { useEffect, useRef } from "react";
import { PlusOutlined } from "@ant-design/icons";

const { TextArea } = Input;
const Dictionary = (props: any) => {
  const { dispatch } = props;
  useEffect(() => {
    dispatch({
      type: "SystemDictionary/pageInit",
    });
  }, []);
  // const access = useAccess();
  const addDictionary = useRef<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    addDictionary.current
      .validateFields()
      .then((params: any) => {
        dispatch({
          type: "SystemDictionary/addDictionaryType",
          params: params,
          callback: () => {
            dispatch({
              type: "SystemDictionary/queryTableDataList",
            });
            setIsModalOpen(false);
          },
        });
      })
      .catch((err: string) => {
        console.log(err);
      });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const refresh = () => {
    dispatch({
      type: "SystemDictionary/refreshList",
    });
  };
  return (
    <PageContainer
      extra={[
        <Button
          key="add"
          onClick={showModal}
          type="primary"
          icon={<PlusOutlined />}
        >
          新增字典
        </Button>,
        <Button key="refresh" onClick={refresh}>
          刷新字典缓存
        </Button>,
      ]}
    >
      <FilterForm />
      <PageTable />

      <Modal
        title="添加字典类型"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form labelCol={{ span: 4 }} ref={addDictionary}>
          <Form.Item
            name="dictName"
            label="字典名称"
            rules={[{ required: true }]}
          >
            <Input placeholder={"请输入字典名称"} maxLength={20} />
          </Form.Item>
          <Form.Item
            name="dictType"
            label="字典类型"
            rules={[{ required: true }]}
          >
            <Input placeholder={"请输入字典类型"} maxLength={30} />
          </Form.Item>
          <Form.Item name="status" label="状态" rules={[{ required: true }]}>
            <Radio.Group>
              <Radio value="0">正常</Radio>
              <Radio value="1">停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <TextArea rows={4} placeholder={"请输入内容"} maxLength={100} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default connect((SystemDictionary: any) => ({
  ...SystemDictionary,
}))(Dictionary);
